﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>table 组件综合演示 - Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="ID=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//unpkg.com/layui@2.11.0/dist/css/layui.css" rel="stylesheet">
    <style>
        /* 自定义分页栏样式 */
        .layui-laypage {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
        }

            .layui-laypage a,
            .layui-laypage span {
                margin: 0 5px;
                padding: 0 10px;
                height: 30px;
                line-height: 30px;
                border: 1px solid #e2e2e2;
                border-radius: 3px;
                cursor: pointer;
            }

                .layui-laypage a:hover {
                    color: #009688;
                }

            .layui-laypage.laypage-curr {
                background-color: #009688;
                color: #fff;
            }

        /* 新增的查询条件样式 */
        .layui-btn-container {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            /* 允许换行 */
        }

            .layui-btn-container input {
                margin-right: 10px;
            }

        .navbar {
            display: none;
        }

        /* 让查询条件水平排列 */
        #toolbarDemo .layui-form-item {
            margin-bottom: 0;
            /* 去除表单元素的底部边距 */
        }

        #toolbarDemo .layui-input-inline {
            margin-right: 10px;
            /* 输入框之间的间距 */
        }

        /* 优化整体布局，添加一些外边距和内边距 */
        body {
            padding: 16px;
        }

        /* 让按钮和输入框有更好的间距 */
        #toolbarDemo button {
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <div style="padding: 16px;">
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>
    <input type="file" id="import-file" style="display: none;">

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>

            <input type="text" style="width:230px;height:40px" name="patientName" placeholder="请输入姓名"
                class="layui-input">

            <input type="text" style="width:230px;height:40px" name="patientNo" placeholder="请输入就诊卡号"
                class="layui-input">

            <button class="layui-btn layui-btn-sm" lay-event="search">查询</button>
            <button class="layui-btn layui-btn-sm" lay-event="reset">重置</button>
            <button type="button" class="layui-btn" style="margin-left:20px" id="import-btn">导入</button>
        </div>
    </script>

    <script type="text/html" id="toolDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">详情</a>
    </script>

    <script src="//unpkg.com/layui@2.11.0/dist/layui.js"></script>
    <script>
        layui.use(['table', 'layer', 'jquery'], function () {
            var table = layui.table,
                layer = layui.layer,
                $ = layui.jquery;

            // 表格渲染
            table.render({
                elem: '#test',
                url: '@ViewBag.BaseUrl/T5/Refund/GetRefund',
                page: true,
                request: { pageName: 'PageIndex', limitName: 'PageSize' },
                limit: 8,
                limits: [5, 10, 15],
                toolbar: '#toolbarDemo',
                cellMinWidth: 80,
                totalRow: false,
                cols: [[
                    { type: 'checkbox', fixed: 'left' },
                    { field: 'refundId', fixed: 'left', width: 100, title: 'ID', sort: true },
                    { field: 'refundTime', width: 160, title: '操作时间' },
                    { field: 'refundNo', width: 160, title: '退款编号' },
                    { field: 'patientName', width: 160, title: '患者姓名' },
                    { field: 'patientNo', width: 160, title: '就诊卡号' },
                    { field: 'source', width: 160, title: '来源' },
                    { field: 'businessType', width: 250, title: '业务类型' },
                    { field: 'refundPath', width: 250, title: '退款方式' },
                    { field: 'refundAmount', width: 250, title: '退款金额（元）' },
                    { field: 'refundStatus', width: 250, title: '退款状态' },
                    { field: 'cardBalance', width: 250, title: '卡内余额' },
                    { fixed: 'right', title: '操作', width: 130, minWidth: 125, templet: '#toolDemo' }
                ]],
                done: function (res, curr, count) {
                    // 修复下拉菜单重复渲染问题（原代码存在多个dropdown.render，这里根据需求保留必要功能）
                }
            });

            // 分页处理
            table.on('page(test)', function (obj) {
                console.log('当前页：', obj.curr, '每页数量：', obj.limit);
            });

            // 修改部分：将 table.on('tool(test)',... ) 替换为 table.on('toolbar(test)',... )
            table.on('toolbar(test)', function (obj) {
                if (obj.event === 'search') {
                    var patientName = $('[name="patientName"]').val();
                    var patientNo = $('[name="patientNo"]').val();

                    // 重新加载表格并传递查询参数
                    table.reload('test', {
                        where: {
                            patientName: patientName,
                            patientNo: patientNo
                        },
                        page: {
                            curr: 1 // 重置为第一页
                        }
                    });
                } else if (obj.event === 'reset') {
                    // 重置查询条件
                    $('[name="patientName"]').val('');
                    $('[name="patientNo"]').val('');

                    // 重新加载表格，不传递查询参数
                    table.reload('test', {
                        where: {},
                        page: {
                            curr: 1 // 重置为第一页
                        }
                    });
                }
            });

            // 行工具事件
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                if (obj.event === 'edit') {
                    window.location.href = '/Refund/FtRefund?refundId=' + data.refundId;
                }
            });

            $('#import-btn').click(function () {
                $('#import-file').click();
            });

            $('#import-file').change(function () {
                const file = this.files[0];
                if (file) {
                    const formData = new FormData();
                    formData.append('file', file);

                    $.ajax({
                        url: '@ViewBag.BaseUrl/T6/Refund/ImportInventories3',
                        type: 'POST',
                        data: formData,
                        contentType: false,
                        processData: false,
                        success: function (res) {
                            layer.msg('导入成功');
                            table.reload('test', {
                                page: {
                                    curr: 1 // 回到第一页
                                }
                            });
                        },
                        error: function () {
                            layer.msg('导入失败，请稍后重试');
                        }
                    });
                }
            });
        });
    </script>
</body>

</html>